<template>
  <div class="install_guide">
    <div class="dialog_globalAlert_title">
      为了不影响您的正常使用，请尽快安装通讯录
    </div>
    <div class="dialog_globalAlert_content">
      因企业微信不再允许第三方应用直接授权企业的通讯录，所以若不安装托管道一云通讯录，将影响平台部分功能使用，请参照以下提示完成安装
    </div>
    <div style="margin-top:24px">
        <div style="display:flex;align-items:center">
          <p style="line-height:20px;margin-right:4px;display:flex"><img src="@/assets/images/common/install-guide-icon.svg" width="16" height="16"></p>
          <p class="step_text main_color"><a target="_blank" href="https://qiqiao.do1.com.cn/help/user_manual/%E4%B8%83%E5%B7%A7Plus%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/%E4%B8%83%E5%B7%A7Plus%E5%B9%B3%E5%8F%B0%E7%9A%84%E6%9E%84%E6%88%90/%E4%BA%8C%E3%80%81%E9%9D%A2%E5%90%91%E7%AE%A1%E7%90%86%E4%BA%BA%E5%91%98%E7%9A%84%E9%80%9A%E8%AE%AF%E5%BD%95%E5%B9%B3%E5%8F%B0.html">安装指引</a></p>
        </div>
        <div style="margin-top:16px">
            <el-steps direction="vertical" :space="44">
                <el-step title="步骤 1">
                    <div slot="title">
                        <span class="step_text">扫码登录道一云管理后台</span>
                        <span class="step_text main_color"><a target="_blank" href="https://qy.do1.com.cn/qwy/application/application!authSuite.action?suiteId=tje2a97b8b255a9d9a">登录界面 ></a></span>
                    </div>
                </el-step>
                <el-step title="步骤 2">
                    <div slot="title">
                        <span class="step_text">在道一云管理后台安装通讯录应用</span>
                    </div>
                </el-step>
                <el-step title="步骤 3">
                    <div slot="title">
                        <span class="step_text">安装成功后，回到当前页面刷新即可</span>
                    </div>
                </el-step>
            </el-steps>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  // 通讯录安装指引
  name: 'directoryInstallationGuide',
  data() {
    return {

    }
  }
}
</script>

<style lang="less">
.install_guide {
  .el-step__icon.is-text {
    border-color:#BFBFBF;
    background-color: #BFBFBF;
    .el-step__icon-inner {
      color: #FFFFFF;
      font-weight: 400;
    }
  }
  .el-step__line {
    background-color: #BFBFBF;
  }
  .step_text {
    color:#262626;
    font-size:14px;
    line-height:22px;
    &.main_color {
      color: @primaryColor;
      cursor: pointer;
    }
  }
  .el-step.is-vertical .el-step__line {
    width: 1px;
  }
}
</style>
